<template>
	<view class="index">
		<view class="index">
			<view style="height: 1rpx;">

			</view>
			<view v-for="(item,index) in tiezilist" :key="index">
				<view class="tiezi">
					<view class="l1">
						<image v-if="item.headicon" :src="item.headicon" mode="aspectFit" class="headicon"></image>
						<view class="namedate">
							<text class="name">{{item.name}}</text>
							<text class="date">{{item.date}}</text>
						</view>
					</view>
					<view class="l2">
						<text>{{item.cotent}}</text>
					</view>
					<view class="l3">
						<view v-for="(item1,index) in item.pic" :key="index">
							<image v-if="item1" :src="item1" mode="aspectFill" class="contentpic"></image>
						</view>
					</view>
					<view class="l4">
						<view class="zan">
							<image v-if="item.zanicon":src="item.zanicon"
								mode="" class="icon" @click="zan(item.id)"></image>
							<view class="">
								{{item.zan}}
							</view>
						</view><text style="color: #a6a6a6;">|</text>
						<view class="comment">
							<image
								src=""
								mode="" class="icon"></image>
							<view class="">
								{{item.comment}}
							</view>
						</view><text style="color: #a6a6a6;">|</text>
						<view class="eye">
							<image
								src=""
								mode="" class="icon"></image>
							<view class="">
								{{item.eye}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view style="height: 1rpx;">

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tiezilist: [{
						zanicon:"https://z3.ax1x.com/2021/05/29/2kI9Bj.png",
						id:0,
						name: "小芳",
						headicon: "../../static/headicon/1.jpg",
						date: "2021年4月3日",
						cotent: "1988自习室太好了吧！",
						pic: ["../../static/roomimg/1.jpg", "../../static/roomimg/2.jpg"],
						zan: 4,
						comment: 9,
						eye: 288
					},
					{
						zanicon:"https://z3.ax1x.com/2021/05/29/2kI9Bj.png",
						id:1,
						name: "阿龙",
						headicon: "../../static/headicon/2.jpeg",
						date: "2021年4月3日",
						cotent: "神仙平台！大伙儿赞同吗？",
						pic: [],
						zan: 7,
						comment: 290,
						eye: 1000
					},
					{
						zanicon:"https://z3.ax1x.com/2021/05/29/2kI9Bj.png",
						id:2,
						name: "青青",
						headicon: "../../static/headicon/3.jpg",
						date: "2021年4月3日",
						cotent: "有小伙伴在方隐自习室吗？可以约自习呀！",
						pic: [],
						zan: 4,
						comment: 9,
						eye: 288
					},
					{
						zanicon:"https://z3.ax1x.com/2021/05/29/2kI9Bj.png",
						id:3,
						name: "阿福",
						headicon: "../../static/headicon/4.jpg",
						date: "2021年4月3日",
						cotent: "1988冲一波！！！",
						pic: ["../../static/roomimg/1.jpg", "../../static/roomimg/2.jpg"],
						zan: 4,
						comment: 9,
						eye: 288
					},
					{
						zanicon:"https://z3.ax1x.com/2021/05/29/2kI9Bj.png",
						id:4,
						name: "左立",
						headicon: "../../static/headicon/5.jpg",
						date: "2021年4月3日",
						cotent: "1988自习室太好了吧！",
						pic: ["../../static/roomimg/1.jpg", "../../static/roomimg/2.jpg"],
						zan: 4,
						comment: 9,
						eye: 288
					},
					{
						zanicon:"https://z3.ax1x.com/2021/05/29/2kI9Bj.png",
						id:5,
						name: "shshaa",
						headicon: "../../static/headicon/6.jpg",
						date: "2021年4月3日",
						cotent: "1988自习室太好了吧！",
						pic: ["../../static/roomimg/1.jpg", "../../static/roomimg/2.jpg"],
						zan: 4,
						comment: 9,
						eye: 288
					}
				]

			}
		},
		methods: {
			zan(id){
				if(this.tiezilist[id].zanicon=="https://z3.ax1x.com/2021/05/29/2kI9Bj.png"){
					this.tiezilist[id].zanicon="https://z3.ax1x.com/2021/05/29/2kIpuQ.png";
					this.tiezilist[id].zan+=1;
				}
				else{
					this.tiezilist[id].zanicon="https://z3.ax1x.com/2021/05/29/2kI9Bj.png";
					this.tiezilist[id].zan-=1;
				}
			}
		}
	}
</script>

<style lang="scss">
	.index {
		background-color: #f0f0f0;
	}

	.tiezi {
		padding: 20rpx 26rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;

		.l1 {
			display: flex;
			flex-direction: row;
			gap: 15rpx;

			.headicon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 1px solid #FFFFFF;
			}

			.namedate {
				display: flex;
				flex-direction: column;

				.name {
					font-size: 35rpx;
					font-weight: bold;
				}

				.date {
					font-size: 28rpx;
					color: #b0b0b0;
				}
			}
		}

		.l2 {
			margin-top: 20rpx;
		}

		.l3 {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 15rpx;
			margin-top: 15rpx;

			.contentpic {
				height: 200rpx;
				width: 200rpx;
			}
		}

		.l4 {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 0 70rpx;
			margin-top: 15rpx;
			.zan {
				gap: 10rpx;
				display: flex;
				flex-direction: row;
			}
			.comment{
				gap: 10rpx;
				display: flex;
				flex-direction: row;
			}
			.eye{
				gap: 10rpx;
				display: flex;
				flex-direction: row;
			}
		}
	}
	.icon {
		width: 35rpx;
		height: 35rpx;
		margin-top: 4rpx;
	}
</style>
